系統功能

本網頁元件有些特殊效果，
1. 滑鼠經過大主題時，會有顏色捲動效果
2. 滑鼠經過 Header 人物圖像時，會放大
3. 滑鼠移入搜尋列時，搜尋列會拉長
4. 滑鼠經過中主題時，會有紅色捲動效果
5. 課程上顯示紅色，表示上次看到這篇

個人感想

1. 我的工作一直都在做後端資料處理，做 GUI 時，有做過車用導航系統，也有撰寫 Windows 程式（ VC, BCB, DotNet ), 還寫過一個在當時 PDA 上執行的翻牌配對程式，網頁程式一直都不是我的工作範圍，也因為這樣，才想要在工作之餘寫個網頁程式，來彌補程式設計中缺少的那一塊。
2. 在很久之前，我的印象中還停在 HTML 語法，和簡單的 CSS 語法，不知道什麼時候開始，CSS變成了網頁程式中的金三角（HTML+CSS+JavaScript)，而且 CSS 已經可以做很多事情，包含繪圖與動畫，讓以前的網頁已經無法與今日的網頁相比。
3. 看過一些 CSS 的高超技巧，有些令人嘆為觀止，而這個網頁並沒有很多炫爛的技巧，一則是還是得顧及不同的瀏覽器，另外對網頁的效能可能有所衝擊，也可能暄賓奪主，畢竟這個網頁的重點是在於學習，所以就適可而止的加上些 CSS 技巧，讓它和古老的網頁做一些區隔，看起來也比較能稱上是2022年建立的，而不是2002年的古董。

技術手法

1. 此處使用了 linear-gradient, translateY, scaleY等等。
光是介紹 CSS 的部份，市面上已經有好幾本書，同樣網路上也有許多CSS的介紹，這邊也就放一個鏈結 https://www.w3schools.com/css/
對這項技術有興趣的人，可以連到上面的網址去看看。


&__item--active::before {
    transform: scaleY(1);
    width: 100%;
}

&:hover {
    background-image: linear-gradient(
        to left,
        var(--color-primary-light),
        var(--color-primary-dark)
    );
}

&:hover &__visible {
    transform: translateY(100%);
}

2. 說到了網頁的美觀性。底下是摘錄自 Udemy 課程-The Complete 2023 Web Development Bootcamp 第12節 Web Design School - Create a Website that People Love 內提到的 Web Design Principles.
• 一個好的網站的四個要素 
	1. Color Theory - 顏色
	
	2. Typography - 文字
	
	3. User Interface Design - UI 設計
		(1) Hierarchy  
		使用顏色，字體大小，區分段落的重要性 
		(2) Layout : 
		一行 40~60 個字元最好
		(3) Alignment
		(4) White Space
		(5) Audience
		想想你的觀眾（專業的大人，或是小孩），Design for your audience.
		
	4. User Experience Design - UX 設計
		(1) Simplicity  - 簡單性
		(2) Consistency - 一致性
		不同的網頁，應該要有一致的操作方式與 layout
		(3) Reading Patterns - 閱讀方向
		F Pattern & Z Pattern
		(4) All Plarform Design - 瀏覽裝置
		要考慮 NB & 手機
		(5) Don't Use Your Powers for Evil 
		不要誤導使用者

語文學習05-數字與時間

1. 你兒子幾歲？我兒子9歲
2. 現在幾點了？現在7點40分
3. 你什麼時候要去日本？我明年3月要去
4. 〖單字〗數字 - 基數，序數
5. 〖單字〗時間 - 時分秒
6. 〖單字〗日期 - 年月日，季節，星期
7. 〖單字〗時刻 - 早中晚
8. 〖單字〗季節 - 春夏秋冬